<template>
  <div class="user-management">
    <div class="user-1">
      <p>居民管理</p>
        <div style="display: inline-block; margin-left: 5px;margin-bottom: 20px;">
        <span style="margin-left: 5px; margin-right: 8px;">签约状态</span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: inline-block; margin-left: 20px">
        <span style="margin-left: 10px; margin-right: 8px;">签约机构</span>
        <el-select
          v-model="value2"
          collapse-tags
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: inline-block; margin-left: 20px">
        <span style="margin-left: 10px; margin-right: 8px;">医生团队</span>
        <el-select
          v-model="value3"
          collapse-tags
          collapse-tags-tooltip
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
      </el-select>
    </div>
    <el-button type="primary" style="margin-left:30px;" @click="toUserAdd">新增居民档案</el-button>
  </div>

  <div class="user-2">
    <div style="display: inline-block; margin-left: 5px;">
        <span style="margin-left: 5px; margin-right: 8px;">服务包</span>
        <el-select
          v-model="value4"
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr4"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div style="display: inline-block; margin-left: 20px">
        <span style="margin-left: 10px; margin-right: 8px;">居民标签</span>
        <el-select
          multiple 
          v-model="value5"
          collapse-tags
          placeholder="请选择"
          style="width: 180px"
        >
          <el-option
            v-for="item in arr5"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <el-input
      v-model="input2"
      class="w-50 m-2"
      placeholder="请输入关键字"
      :suffix-icon="Search"
      style="width:380px; margin-left: 40px;"
    />
   </div>
   <div>
    <el-row :gutter="20">
      <el-col :span="4"
      v-for="(o,index) in 18"
        :key="o"
        :offset="index > 0 ? 2 : 0"
      >
      <div class="grid-content ep-bg-purple"/>
    <el-row class="box" style="display:inline-block;">
      <el-card :body-style="{ padding: '0px' }">
        <img
          src="https://www.pmdaniu.com/storages/127496/5e1a546311e3b27aa7a6b6b7fb02a8bc-57026/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u1271.png"
          class="image"
        />
        <div style="padding: 14px">
          <span style="font-weight:800; margin-left:40px;">王然</span>
          <span style="margin-left:8px; font-size:14px;color:#000;" >26岁</span>
          <div>
          <el-button style="margin-left:40px;" @click="toUserQian">签约中</el-button>
          </div>
          <div class="bottom">
            <el-button type="primary" round class="button">高血压</el-button>
            <el-button type="success" round class="button">冠心病</el-button>
            <el-button type="danger" round class="button">高血糖</el-button>
          </div>
        </div>
      </el-card>
  </el-row>
      </el-col>
    </el-row>
   </div>
   <div class="demo-pagination-block">
    <el-pagination
      v-model:currentPage="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="200"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top:20px;"
    />
  </div>
</div>

</template>

<script lang="ts" setup>

import { computed, ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import router from '../../router'

  function toUserAdd () {
    router.push('/user-management/user-add')
}

function toUserQian () {
  router.push('/user-management/user-qianyue')
}
// toUserAdd()

const currentPage4 = ref(4)
const pageSize4 = ref(20)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const input2 = ref('')

const value1 = ref([])
const value2 = ref([])
const value3 = ref([])
const value4 = ref([])
const value5 = ref([])
const arr1 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '待签约',
    label: '待签约',
  },
  {
    value: '签约中',
    label: '签约中',
  },
  {
    value: '签约生效中',
    label: '签约生效中',
  },
  {
    value: '待续约',
    label: '待续约',
  },
]
const arr2 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '罗西社区服务中心',
    label: '罗西社区服务中心',
  },
  {
    value: '天明社区服务中心',
    label: '天明社区服务中心',
  },
  {
    value: '明进社区服务中心',
    label: '明进社区服务中心',
  },
]
const arr3 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '王皓团队',
    label: '王皓团队',
  },
  {
    value: '胡曼团队',
    label: '胡曼团队',
  },
  {
    value: '李维团队',
    label: '李维团队',
  },
]
const arr4 = [
  {
    value: '请选择',
    label: '请选择',
  },
  {
    value: '0-6岁儿童服务包',
    label: '0-6岁儿童服务包',
  },
  {
    value: '老年人服务包',
    label: '老年人服务包',
  },
  {
    value: '慢性病护理包',
    label: '慢性病护理包',
  },
]
const arr5 = [
  {
    value: '脂肪肝',
    label: '脂肪肝',
  },
  {
    value: '慢病护理',
    label: '慢病护理',
  },
  {
    value: '高血压',
    label: '高血压',
  },
  {
    value: '高血糖',
    label: '高血糖',
  },
]

</script>

<style scoped>
.box {
  margin-top: 20px;
  width: 180px;
  height: 300px;
  display: flex;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}
.image {
  margin-left: 50px;
}
</style>
